<template>
  <div id="phone-detect">
    <el-divider content-position="center" class="title-center">手机检测</el-divider>
    <el-steps :active="active" align-center>
      <el-step title="上传" />
      <el-step title="系统处理中" />
      <el-step title="结果" />
    </el-steps>
    <div v-if="active===0" class="type-select">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="类型" prop="fileType">
          <el-select v-model="form.filetype" placeholder="请选择返回文件类型">
            <el-option value="video" label="视频" />
            <el-option value="photo" label="图片" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <!--      :data=uploadData-->
      <el-upload
        v-if="active===0"
        class="upload-demo"
        drag
        action="/api/phone_detect"
        name="file"
        :data="form"
        :on-success="successFunction"
        :on-error="errorFunction"
        :before-upload="beforeFunction"
        multiple
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传视频或图片文件</div>
      </el-upload>
      <div v-if="active===1" class="loading-sun-wrap">
        <div class="loading-sun">
          <div class="sun">
            <div class="sun-body">
              <div class="line" style="--i: 1" />
              <div class="line" style="--i: 2" />
              <div class="line" style="--i: 3" />
              <div class="line" style="--i: 4" />
              <div class="line" style="--i: 5" />
              <div class="line" style="--i: 6" />
              <div class="line" style="--i: 7" />
              <div class="line" style="--i: 8" />
            </div>
            <div class="eye" />
          </div>
          <div class="horizon" />
        </div>
      </div>
      <div v-if="active===3 && form.filetype === 'video'" class="result">
        <el-card class="result-card">
          <el-alert
            v-if="id !== ''"
            type="warning"
            show-icon
            class="id-warning"
          >
            <template v-slot:title>
              <span>人员ID: </span>
              <span>{{ id }}</span>
              <span> 违规使用手机</span>
            </template>
          </el-alert>
          <el-alert v-if="id === ''" type="success" show-icon class="id-warning" title="无人员违规" />
          <div class="main-player">
            <d-player id="player" ref="player" :options="options" />
          </div>
          <el-row>
            <el-col>
              <el-button class="video-download" @click="downloadFile()">视频下载</el-button>
              <el-button type="primary" class="btn-return" @click="active=0">返回</el-button>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div v-if="active===3 && form.filetype === 'photo' ">
        <img :src="imgUrl" alt="">
        <el-button type="primary" class="btn-return" @click="active=0">返回</el-button>
      </div>
    </div>
    <!--    <el-button @click="next()">下一部</el-button>-->
  </div>
</template>
<script>
import { BASE_DETECT_URL } from '@/api/realTime'

export default {
  name: 'Phone',
  data() {
    return {
      active: 0,
      id: '',
      imgUrl: '',
      options: {
        container: document.getElementById('dplayer'), // 播放器容器
        mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
        theme: '#b7daff', // 风格颜色，例如播放条，音量条的颜色
        loop: false, // 是否自动循环
        lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'
        screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
        hotkey: true, // 是否支持热键，调节音量，播放，暂停等
        preload: 'auto', // 自动预加载
        volume: 0.7, // 初始化音量
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], // 可选的播放速度，可自定义
        logo:
          'https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png', // 在视频左上角上打一个logo
        video: {
          url:
            'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4', // 播放视频的路径
          quality: [
            // 设置多个质量的视频
            {
              name: '高清',
              url:
                'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
              type: 'auto' // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
            },
            {
              name: '标清',
              url:
                '',
              type: 'auto'
            }
          ],
          defaultQuality: 0, // 默认是高清
          pic:
            '', // 视频封面图片
          thumbnails:
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=24336452,906724543&fm=26&gp=0.jpg' // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
        },
        // subtitle: {
        //   //字幕
        //   url: "", //字幕网址
        //   color: "#fff", //字幕颜色
        //   fontSize: "20px",
        //   bottom: "40px"
        // },
        // danmaku: {
        //   // 弹幕
        //   id: '9E2E3368B56CDBB4',
        //   api: 'https://api.prprpr.me/dplayer/',
        //   token: 'tokendemo', // 后端验证令牌
        //   maximum: 1000, // 弹幕最大数量
        //   addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'], // 其他弹幕
        //   user: 'DIYgod', // 弹幕用户名
        //   bottom: '15%', // 值，例如：10px，10％，即弹幕底部和播放器底部之间的距离，以防止遮挡字幕
        //   unlimited: true // 即使弹幕重叠也显示所有弹幕
        // },
        contextmenu: [
          //  自定义上下文菜单
          // 右键菜单
          {
            text: 'b站',
            link: 'https://www.bilibili.com'
          },
          {
            text: '选项二',
            click: player => {
              console.log(player)
            }
          }
        ],
        highlight: [
          // 进度条上的自定义时间标记
          // 进度条时间点高亮
          {
            text: '10M',
            time: 6
          },
          {
            text: '20M',
            time: 12
          }
        ]
      },
      form: {
        filetype: ''
      },
      videoUrl: '',
      rules: {
        fileType: [{ require: true, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
    // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
    // document.querySelector('.dplayer-mask').remove()
    // document.querySelector('.dplayer-info-panel-item-url').remove() // 隐藏播放源
    // const length = document.querySelectorAll('.dplayer-menu-item').length
    // document.querySelectorAll('.dplayer-menu-item')[length - 2].remove() // 去掉作者信息
    // document.querySelectorAll('.dplayer-menu-item')[length - 1].remove() // 去掉作者信息
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0
    },
    steamrollArray(arr) {
      const newArr = []
      function dfsArray(arr) {
        for (let i = 0; i < arr.length; i++) {
          if (!Array.isArray(arr[i])) {
            newArr.push(arr[i])
          } else {
            dfsArray(arr[i])
          }
        }
      }
      dfsArray(arr)
      return newArr
    },
    downloadFile(url) {
      window.location.href = this.videoUrl
    },
    successFunction(response) {
      console.log(response)
      if (response.res_path.length !== 0 && this.form.filetype === 'video') {
        this.active = 3
        this.$notify({
          title: '成功',
          message: '检测成功',
          type: 'success'
        })
        this.options.video.url = BASE_DETECT_URL + response.res_path
        this.options.video.quality[0].url = BASE_DETECT_URL + response.res_path
        this.videoUrl = BASE_DETECT_URL + response.res_path
        // this.imgUrl = response.res_path
        const unInitId = response.res_text
        // this.id = this.steamrollArray(unInitId).toString().replace(/,/g, '、')
        this.id = unInitId.toString()
      } else if (response.res_path.length !== 0 && this.form.filetype === 'photo') {
        this.active = 3
        this.$notify({
          title: '成功',
          message: '检测成功',
          type: 'success'
        })
        this.imgUrl = BASE_DETECT_URL + response.res_path
      } else {
        this.$notify({
          title: '失败',
          message: '检测错误',
          type: 'error'
        })
        this.active = 0
      }
    },
    errorFunction(err) {
      console.log(err)
      this.$message({
        type: 'error',
        message: err
      })
      this.active = 0
    },
    beforeFunction(file) {
      if (this.form.filetype === '') {
        this.$message({
          type: 'warning',
          message: '未选择类型'
        })
        this.active = 0
      } else {
        this.active = 1
      }
      // const isFileSize = file.size / 1024 / 1024 < 1
      // if (!isFileSize) {
      //   this.$message({
      //     message: '只能上传1M以内文件',
      //     type: 'warning'
      //   })
      //   return false
      // }
    }
  }
}
</script>

<style scoped>
.title-center{
  font-weight: bold;
  margin-bottom:30px;
}
.type-select{
  margin: 20px auto;
  width: 400px;
  /*height: 40px;*/
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
}
.main{
  margin-top:20px;
  display: flex;
  justify-content: center;
  align-items: center
}
.main-player{
  width: 1000px;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
.id-warning{
  margin-bottom: 20px;
}
.btn-return{
  display: inline;
  text-align: center;
  margin-top: 20px;
}
.video-download{
  margin-top: 10px;
}
</style>
